
// 地区联动数据组件,改进版数据
// const addressData = require('china-area-data/v3/data');
const addressData = require('./data');

import _ from 'lodash'

// 注册全局组件
Vue.component('select-district', {
    // 组件属性(与外部交互)
    props: {
        // 初始化省市区值
        initValue: {
            // 数据类型校验
            type: Array,
            // 默认值
            default: () => ([]),
        }
    },
    // 组件内数据（内部处理）
    data() {
        return {
            provinces: addressData['86'], // 省列表
            cities: {}, // 城市列表
            districts: {}, // 地区列表
            provinceId: '', // 当前选中的省
            cityId: '', // 当前选中的市
            districtId: '', // 当前选中的区
        }
    },

    // 观察数据
    watch: {
        provinceId(newVal) {
            if (!newVal) {
                this.cities = {};
                this.cityId = '';
                return;
            }
            // 将城市列表设为当前省下的城市
            this.cities = addressData[newVal]
            // 若选中的城市不在当前省中，则选中城市清空
            if (!this.cities[this.cityId]) {
                this.cityId = ''
            }
        },
        cityId(newVal) {
            if (!newVal) {
                this.districts = {};
                this.districtId = '';
                return;
            }
            // 将地区列表设为当前城市下的地区
            this.districts = addressData[newVal];
            // 若当前地区不在当前城市下，则将选中地区清空
            if (!this.districts[this.districtId]) {
                this.districtId = '';
            }
        },
        // 选择地区时改变触发
        districtId() {
            // 触发change事件
            this.$emit('change', [this.provinces[this.provinceId], this.cities[this.cityId], this.districts[this.districtId]])
        }
    },

    // 观察/事件之后，组件挂载之前调用
    created() {
        this.setFromValue(this.initValue)
    },

    methods: {
        setFromValue(value) {
            // 返回真值数据,过滤
            value = _.filter(value)
            // 数据为空则清，联动清除
            if (value.length === 0) {
                this.provinceId = '';
                return;
            }

            // 从指定对象中找省索引
            const provinceId = _.findKey(this.provinces, o => o === value[0]);
            if (!provinceId) {
                this.provinceId = '';
                return;
            }
            this.provinceId = provinceId

            // 根据省检索市，第二个参数为断言函数
            const cityId = _.findKey(addressData[provinceId], o => o === value[1])
            if (!cityId) {
                this.cityId = '';
                return;
            }
            this.cityId = cityId;

            // 地区查找
            const districtId = _.findKey(addressData[cityId], o => o === value[2]);
            if (!districtId) {
                this.districtId = '';
                return;
            }
            this.districtId = districtId;
        }
    }
})